<template>
  <bsCard v-loading="loading" class="statusEmployment-wrapper" :width="getBsLRWPercent(415)" :height="`${cardHeight}px`">
    <div class="bs-card-title">带动就业情况</div>
    <app-echarts class="line-chart" height="150px" :options="echartsOptionTrends" />
    <app-echarts class="pie-chart" height="120px" width="50%" :options="echartsOptionType" />
    <app-echarts class="pie-chart" height="120px" width="calc(50% - 5px)" :options="echartsOptionEducation" />
  </bsCard>
</template>

<script>
import bsCard from './bsCard.vue'
import appEcharts from './appEcharts.vue'
import { getDriveEmployment } from '@/api/bigscreen'
import { colors } from '../components/tools'
const axisOptions = {
  axisLine: {
    lineStyle: {
      color: '#fff'
    }
  },
  nameTextStyle: {
    color: '#fff'
  },
  splitLine: {
    show: false
  }
}
export default {
  name: 'statusEmployment',
  components: {
    bsCard,
    appEcharts
  },
  inject: ['getBsLRWPercent', 'cardTitleHeight'],
  data() {
    return {
      cardHeight: 320,
      loading: true,
      //
      echartsOptionTrends: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        grid: {
          left: '0',
          right: '0',
          bottom: '0',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            ...axisOptions,
            axisLabel: {
              // rotate: 15
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位:万人',
            ...axisOptions,
            position: 'left'
          },
          {
            type: 'value',
            name: '单位:元',
            ...axisOptions,
            position: 'right'
          }
        ],
        series: [
          {
            name: '招聘人数',
            data: [],
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#F59A23'
                }
              }
            },
            yAxisIndex: 0
          },
          {
            name: '招聘薪资',
            data: [],
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#2496A1'
                }
              }
            },
            yAxisIndex: 1
          }
        ]
      },
      echartsOptionType: {
        color: colors,
        title: {
          text: '2015年',
          left: '0',
          textStyle: {
            color: '#fff',
            fontSize: 14
          }
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'right'
        // },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '企业类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      },
      echartsOptionEducation: {
        color: colors,
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'right'
        // },
        series: [
          {
            name: '学历分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const res = await getDriveEmployment()
        if (res.resultCode === 200) {
          //
          this.renderTrends(res.resultData.RecruitmentTrends || [])
          this.renderEducation(res.resultData.EducationalDistribution || [])
          this.renderType(res.resultData.TypeOfEnterprise || [])
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    renderTrends(data) {
      let yearArr = []
      let zpArr = []
      let xzArr = []
      for (let perData of data) {
        yearArr.push(perData.year)
        zpArr.push(perData.zpNum)
        xzArr.push(perData.xzNum)
      }
      // xAxis
      this.echartsOptionTrends.xAxis[0].data = yearArr
      // series
      this.echartsOptionTrends.series[0].data = zpArr
      this.echartsOptionTrends.series[1].data = xzArr
    },
    renderEducation(data) {
      this.echartsOptionEducation.series[0].data = data.map((per) => ({
        name: per.type,
        value: per.num
      }))
    },
    renderType(data) {
      this.echartsOptionType.series[0].data = data.map((per) => ({
        name: per.type,
        value: per.num
      }))
    }
  }
}
</script>

<style lang='scss'>
.statusEmployment-wrapper {
  .line-chart,
  .pie-chart {
    display: inline-block;
  }
}
</style>

